<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>OpenDevice Login</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'>-->
    <meta name="google-signin-client_id" content="284609070670-s53kk24afh6ejutsr4o98boftpeeqpfr.apps.googleusercontent.com">

    <link rel="icon" type="image/png" href="/images/favicon.png" />
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/login.css">

</head>

<body>

<div class="form">

    <ul class="tab-group">
        <li class="tab active"><a href="#login">Log In</a></li>
        <li class="tab"><a href="#signup" id="btn-signup">Sign Up</a></li>
    </ul>

    <div class="tab-content">

        <div id="login">
            <h1>OpenDevice</h1>

            <form action="#" method="post">

                <div class="field-wrap">
                    <label>
                        Email Address<span class="req">*</span>
                    </label>
                    <input type="text" name="username" autofocus="true" required/>
                </div>

                <div class="field-wrap">
                    <label>
                        Password<span class="req">*</span>
                    </label>
                    <input type="password" name="password" required autocomplete="off"/>
                </div>

                <p class="forgot"> 
                    <span class="message"></span>
                    <a href="#">Forgot Password?</a>
                </p>

                <button type="submit" class="button button-block" id="btnLogin" >Log In</button>

            </form>

        </div>

        <div id="signup">
            <h1>Sign Up for Free</h1>

            <form action="/" method="post" >

                <div class="top-row">
                    <div class="field-wrap">
                        <label>
                            First Name<span class="req">*</span>
                        </label>
                        <input type="text" required autocomplete="off" disabled/>
                    </div>

                    <div class="field-wrap">
                        <label>
                            Last Name<span class="req">*</span>
                        </label>
                        <input type="text"required autocomplete="off" disabled/>
                    </div>
                </div>

                <div class="field-wrap">
                    <label>
                        Email Address<span class="req">*</span>
                    </label>
                    <input type="email"required autocomplete="off" disabled/>
                </div>

                <div class="field-wrap">
                    <label>
                        Set A Password<span class="req">*</span>
                    </label>
                    <input type="password"required autocomplete="off" disabled/>
                </div>

                <p class="forgot">
                    <span class="message">Please use Google to Sign Up !</span>
                </p>

                <!--<button type="submit" class="button button-block" disabled/>Get Started</button>-->


            </form>

        </div>

    </div><!-- tab-content -->


    <div style="margin-top: 10px">
        <div id="btnGoogle" ></div>
    </div>

</div> <!-- /form -->


<script src='js/jquery-2.2.3.min.js'></script>
<script src="https://apis.google.com/js/platform.js?onload=googleButton" async defer></script>

<script>

    var isLogout = false;
    var inivitationKey;

    // Check message from redirects
    if(location.search.split('message=')[1]){
        $(".message").html(decodeURI(location.search.split('message=')[1]));
    }

    if(location.search.split('logout=')[1]){
        isLogout = true;
        $(".message").html("Logged Out !");
    }

    $(function(){

        if(location.search.split('invitation=')[1]){
            inivitationKey = decodeURI(location.search.split('invitation=')[1]);
            $("#btn-signup").click();
        }

    });


    function onGoogleSignIn(googleUser) {

        if(isLogout){
            googleSignOut();
            isLogout = false; // reset
            return;
        }

        var profile = googleUser.getBasicProfile();
        var id_token = googleUser.getAuthResponse().id_token;

        var data = {
            "idtoken" : id_token,
            "invitation" : inivitationKey
        }

        $(".message").html("Logging...");
        $.post('/api/auth/loginGoogle', data,function(resp) {
            afterLogin(resp);
        })
        .fail(function(err) {
            console.log("fail:", err);
            $(".message").html(err.responseText);
        });

    }



    function googleButton() {
        gapi.signin2.render('btnGoogle', {
            'scope': 'profile email',
            'width': $("#btnGoogle").parent().width(),
            'height': 50,
            'longtitle': true,
            'theme': 'dark',
            'onsuccess': onGoogleSignIn,
            'onfailure': function(){
                alert("google login fail");
            }
        });
    }

    function googleSignOut() {
        var auth2 = gapi.auth2.getAuthInstance();
        auth2.signOut().then(function () {
            console.log('User signed out.');
        });
    }

    function afterLogin(data){
        $(".message").html("");
        localStorage.setItem("AuthToken", data.token);
        sessionStorage.setItem("LastPath", window.location.hash);
        sessionStorage.setItem("logged", true);
        window.location = "/";
    }

    $("#login").find("form").submit(function(event){
        event.preventDefault();

        $(".message").html("Logging...");

        $.post('/api/auth', $(this).serialize(),function(data) {
            afterLogin(data);
        })
        .fail(function(err) {
            console.log("fail:", err);
            $(".message").html(err.responseText);
        });

    });

    $('.form').find('input, textarea').on('keyup blur focus', function (e) {

        var $this = $(this),
                label = $this.prev('label');

        if (e.type === 'keyup') {
            if ($this.val() === '') {
                label.removeClass('active highlight');
            } else {
                label.addClass('active highlight');
            }
        } else if (e.type === 'blur') {
            if( $this.val() === '' ) {
                label.removeClass('active highlight');
            } else {
                label.removeClass('highlight');
            }
        } else if (e.type === 'focus') {

            if( $this.val() === '' ) {
                label.removeClass('highlight');
            }
            else if( $this.val() !== '' ) {
                label.addClass('highlight');
            }
        }

    });

    $('.tab a').on('click', function (e) {

        e.preventDefault();

        $(this).parent().addClass('active');
        $(this).parent().siblings().removeClass('active');

        var target = $(this).attr('href');

        $('.tab-content > div').not(target).hide();

        $(target).fadeIn(600);

    });




</script>


</body>
</html>
